<template>
  <div class="main">
    <div class="return">
      <span @click="returnCir">&lt;</span>
      <span>{{ this.quesID.one }}</span>
      <span>{{ this.quesID.two }}</span>
      <span>{{ this.quesID.three }}</span>
    </div>
    <div class="qus">
      <div class="user">
        <img :src="quesID.Img">
        <span>{{ quesID.name }}</span>
      </div>
      <h1>{{quesID.title}}</h1>
      <div class="center">
        {{quesID.content}}
      </div>
    </div>
    <div class="answer">
      <h2>{{AnsLen}}个回答</h2>
      <div class="ans" v-for="(item,index) in queContent" :key="index">
        <div class="Moba">
          <div class="mode">
            <img :src="item.ansImg">
            <span>{{ item.ansName }}</span>
          </div>
          <div v-html="item.ansContent">
<!--            {{item.ansContent}}-->
          </div>
        </div>
      </div>
    </div>
    <div>
      <h2>撰写回答</h2>
      <editor-bar v-model="detail" :isClear="isClear" @change="change" class="Editor"></editor-bar>
      <button class="pushAns" @click="addAnswer">提交回答</button>
    </div>
  </div>
</template>
<script>
import EditorBar from '../../components/RichText/wangEditor'
import axios from 'axios'
export default {
  inject:['reload'],
  components: {EditorBar},
  data() {
    return {
      isClear: false,
      detail: "",
      AnsLen:'',
      quesID:{
        ansqueID:"",
        name:"",
        title:"",
        content:"",
        Img:"",
        one:"",
        two:"",
        three:""
      },
      ansContent:{

      },
      queContent:{

      },
      editAns:{
        ansqueID:'',
        ansContent:'',
        ansName:'',
        ansImg:''
      }
    }
  },
  methods: {
    change() {
      console.log(this.detail)
    },
    returnCir(){
      this.$router.push('/Channel')
    },
    getAns(){

      axios.post('http://localhost:9999/answer',this.quesID).then((res)=>{
        this.queContent=res.data.data;
        this.AnsLen=this.queContent.length;
      })
    },
    addAnswer(){
      let user = sessionStorage.getItem('user')
      user=JSON.parse(user);
      if (user==null){
        this.$router.push('/sign')
      }else {
        this.editAns.ansName=user.name;
        this.editAns.ansImg=user.userImg;
        this.editAns.ansqueID=this.quesID.ansqueID
        this.editAns.ansContent=this.detail
        // console.log(this.editAns)
        axios.post('http://localhost:9999/addAns',this.editAns)
        this.detail=''
        this.reload();
      }
    }
  },
  created() {
    this.ansContent=JSON.parse(sessionStorage.getItem('ques'))
    console.log(this.ansContent.labelone)
    this.quesID.ansqueID=this.ansContent.queID
    this.quesID.name=this.ansContent.username
    this.quesID.Img=this.ansContent.userImg
    this.quesID.one=this.ansContent.labelone
    this.quesID.two=this.ansContent.labeltwo
    this.quesID.three=this.ansContent.labelthree
    this.quesID.content=this.ansContent.ques
    this.quesID.title=this.ansContent.questitle
    this.getAns()
  }
}
</script>
<style scoped>
button{
  border: none;
  background-color: transparent;
  outline: none;
}
img{
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
.main {
  background-color: #e9ecef;
  height: 100%;
  width: 100%;
}

.return {
  height: 50px;
}

.return span:nth-child(1) {
  line-height: 50px;
  font-size: 40px;
}
.return span:nth-child(2),
.return span:nth-child(3),
.return span:nth-child(4){
  font-size: 10px;
  color: #00965e;
  background-color: rgba(0,150,94,.1);
  margin-right: 5px;
  float: right;
  margin-top: 30px;
}

.qus,
.ans
{
  margin: 0 auto;
  position: relative;
  padding: 20px;
  background-color: white;
  width: 80%;
}
.mode,
.user{

  height: 55px;
}
.user span,
.mode span{
  position: relative;
  color:#00965e ;
  bottom: 18px;
  line-height: 50px;
}
/*.user span{*/
/*  color:#00965e ;*/
/*  line-height: 50px;*/
/*}*/

.pushAns{
  background-color:#00965e ;
  border-color: #00965e;
  padding: 6px 12px;
  color: white;
  border-radius: 10px;
  position: relative;
  left: 40%;
}
.ans{
  margin-bottom: 8px;
}
</style>
